---
layout: default
title: Javascript Input Mask
---
{% include default_header.html %}

<main>
  <div class="features row">
    <div class="col col-6">
      <h4>Features</h4>
      <ul>
        <li>get and set <em>value</em> and <em>unmasked value</em> easily</li>
        <li>no external dependencies</li>
        <li>supports <a href="guide.html#overwrite">overwrite</a> mode</li>
        <li>supports all major browsers</li>
        <li>supports <em>web components</em></li>
        <li>supports <em>contenteditable</em></li>
        <li><a href="guide.html#masked-base"><strong>RegExp</strong> mask</a></li>
        <li><a href="guide.html#masked-base"><strong>Function</strong> mask</a></li>
        <li><a href="guide.html#masked-number"><strong>Number</strong> mask</a> (integer and decimal support)</li>
        <li><a href="guide.html#masked-date"><strong>Date</strong> mask</a> (with various format support and <a href="guide.html#autofix">autofix</a> mode)</li>
        <li><a href="guide.html#masked-dynamic"><strong>Dynamic/on-the-fly</strong> mask</a></li>
        <li><a href="guide.html#masked-pattern"><strong>Pattern</strong> mask</a></li>
        <ul>
          <li>show placeholder <a href="guide.html#lazy">always or when needed</a></li>
          <li>unmasked value can contain fixed parts</li>
          <li>optional input parts</li>
          <li>custom definitions</li>
          <li>reusable blocks</li>
          <li>secure text entry</li>
          <li><a href="guide.html#masked-enum"><strong>Enum</strong></a> and <a href="guide.html#masked-range"><strong>Range</strong></a> masks</li>
          <li><a href="guide.html#repeat"><strong>Repeating</strong></a> blocks</li>
        </ul>
        <li>convert and format values with <a href="guide.html#pipe"><strong>pipe</strong></a></li>
      </ul>
      <h4>Plugins</h4>
      <ul>
        <li><a href="{{ site.repository }}/tree/master/packages/vue-imask">Vue plugin</a></li>
        <li><a href="{{ site.repository }}/tree/master/packages/angular-imask">Angular plugin</a></li>
        <li><a href="{{ site.repository }}/tree/master/packages/react-imask">React plugin</a></li>
        <li><a href="{{ site.repository }}/tree/master/packages/react-native-imask">React native plugin</a></li>
        <li><a href="{{ site.repository }}/tree/master/packages/svelte-imask">Svelte plugin</a></li>
        <li><a href="{{ site.repository }}/tree/master/packages/solid-imask">Solid plugin</a></li>
      </ul>
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEAI6KQE&placement=imaskjsorg" id="_carbonads_js"></script>
      <link rel="stylesheet" href="css/carbon-index.css">
    </div>

    <div class="col col-6">
      <form class="form">
        <div class="form-item">
          <label>RegExp (Russian postal code) <span class="desc">/^[1-6]\d{0,5}$/</span></label>
          <input id="regexp-mask" type="text" value="">

          <div class="toggle-panel">
            <label for="regexp-mask-source">source</label>
            <input id="regexp-mask-source" type="checkbox">
            <div class="toggle-panel-content">
{% highlight javascript %}
IMask(
  document.getElementById('regexp-mask'),
  {
    mask: /^[1-6]\d{0,5}$/
  }
)
{% endhighlight %}
<a href="guide.html#masked-base" class="learn-more">learn more</a>
            </div>
          </div>
        </div>

        <div class="form-item">
          <label>Pattern (Phone) <span class="desc">+{7}(000)000-00-00</span></label>
          <input id="phone-mask" type="text" value="">
          <div class="unmasked-value desc">unmasked: <span id="phone-unmasked"></span><span id="phone-complete" class="example__complete"></span></div>
          <div class="toggle-panel">
            <label for="phone-mask-source">source</label>
            <input id="phone-mask-source" type="checkbox">
            <div class="toggle-panel-content">
{% highlight javascript %}
IMask(
  document.getElementById('phone-mask'),
  {
    mask: '+{7}(000)000-00-00'
  }
)
{% endhighlight %}
<a href="guide.html#masked-pattern" class="learn-more">learn more</a>
            </div>
          </div>
        </div>

        <div class="form-item">
          <label>Pattern (Secure) <span class="desc">XXX-XX-0000</span></label>
          <input id="ssn-mask" type="text" value="">
          <div class="unmasked-value desc">value: <span id="ssn-value"></span><span id="ssn-complete" class="example__complete"></span></div>
          <div class="toggle-panel">
            <label for="ssn-mask-source">source</label>
            <input id="ssn-mask-source" type="checkbox">
            <div class="toggle-panel-content">
{% highlight javascript %}
IMask(
  document.getElementById('ssn-mask'),
  {
    mask: 'XXX-XX-0000',
    definitions: {
      X: {
        mask: '0',
        displayChar: 'X',
        placeholderChar: '#',
      },
    },
    lazy: false,
    overwrite: 'shift',
  }
)
{% endhighlight %}
<a href="guide.html#masked-pattern" class="learn-more">learn more</a>
            </div>
          </div>
        </div>

        <div class="form-item">
          <label>Number <span class="desc">in range [-10000, 10000]</span></label>
          <input id="number-mask" type="text" value="">
          <div class="unmasked-value desc">number: <span id="number-value"></span></div>
          <div class="toggle-panel">
            <label for="number-mask-source">source</label>
            <input id="number-mask-source" type="checkbox">
            <div class="toggle-panel-content">
{% highlight javascript %}
IMask(
  document.getElementById('number-mask'),
  {
    mask: Number,
    min: -10000,
    max: 10000,
    thousandsSeparator: ' '
  }
)
{% endhighlight %}
<a href="guide.html#masked-number" class="learn-more">learn more</a>
            </div>
          </div>
        </div>

        <div class="form-item">
          <label>Date <span class="desc">'dd.mm.yyyy' in range [01.01.1990, 01.01.2020]</span></label>
          <input id="date-mask" type="text" value="">
          <div class="unmasked-value desc">date: <span id="date-value"></span></div>
          <div class="toggle-panel">
            <label for="date-mask-source">source</label>
            <input id="date-mask-source" type="checkbox">
            <div class="toggle-panel-content">
{% highlight javascript %}
IMask(
  document.getElementById('date-mask'),
  {
    mask: Date,
    min: new Date(1990, 0, 1),
    max: new Date(2020, 0, 1),
    lazy: false
  }
)
{% endhighlight %}
<a href="guide.html#masked-date" class="learn-more">learn more</a>
            </div>
          </div>
        </div>

        <div class="form-item">
          <label>On-the-fly select <span class="desc">phone or email</span></label>
          <input id="dynamic-mask" type="text">
          <div class="unmasked-value desc">unmasked: <span id="dynamic-value"></span><span id="dynamic-complete" class="example__complete"></span></div>
          <div class="toggle-panel">
            <label for="dynamic-mask-source">source</label>
            <input id="dynamic-mask-source" type="checkbox">
            <div class="toggle-panel-content">
{% highlight javascript %}
IMask(
  document.getElementById('dynamic-mask'),
  {
    mask: [
      {
        mask: '+{7}(000)000-00-00'
      },
      {
        mask: /^\S*@?\S*$/
      }
    ]
  }
)
{% endhighlight %}
<a href="guide.html#masked-dynamic" class="learn-more">learn more</a>
            </div>
          </div>
        </div>

        <div class="form-item">
          <label>Mask in mask <span class="desc">currency input</span></label>
          <input id="currency-mask" type="text">
          <div class="unmasked-value desc">unmasked: <span id="currency-value"></span><span id="currency-complete" class="example__complete"></span></div>
          <div class="toggle-panel">
            <label for="currency-mask-source">source</label>
            <input id="currency-mask-source" type="checkbox">
            <div class="toggle-panel-content">
{% highlight javascript %}
IMask(
  document.getElementById('currency-mask'),
  {
    mask: '$num',
    blocks: {
      num: {
        // nested masks are available!
        mask: Number,
        thousandsSeparator: ' '
      }
    }
  }
)
{% endhighlight %}
<a href="guide.html#masked-pattern" class="learn-more">learn more</a>
            </div>
          </div>
        </div>

        <div class="form-item">
          <label>Pipe <span class="desc">unmasked &rarr; masked</span></label>
          <input id="pipe-mask" type="text">
          <div class="unmasked-value desc">masked: <span id="pipe-value"></span><span id="pipe-complete" class="example__complete"></span></div>
          <div class="toggle-panel">
            <label for="pipe-mask-source">source</label>
            <input id="pipe-mask-source" type="checkbox">
            <div class="toggle-panel-content">
{% highlight javascript %}
IMask.createPipe(
  phoneMask.masked,
  IMask.PIPE_TYPE.UNMASKED,
  IMask.PIPE_TYPE.MASKED
)
{% endhighlight %}
<a href="guide.html#pipe" class="learn-more">learn more</a>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</main>

<script defer src="https://unpkg.com/imask"></script>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    var phoneMask = IMask(document.getElementById('phone-mask'), {
      mask: '+{7}(000)000-00-00'
    }).on('accept', function() {
      document.getElementById('phone-complete').style.display = '';
      document.getElementById('phone-unmasked').innerHTML = phoneMask.unmaskedValue;
    }).on('complete', function() {
      document.getElementById('phone-complete').style.display = 'inline-block';
    });

    var ssnMask = IMask(document.getElementById('ssn-mask'), {
      mask: 'XXX-XX-0000',
      definitions: {
        X: {
          mask: '0',
          displayChar: 'X',
          placeholderChar: '#',
        },
      },
      lazy: false,
      overwrite: 'shift',
    }).on('accept', function() {
      document.getElementById('ssn-complete').style.display = '';
      document.getElementById('ssn-value').innerHTML = ssnMask.value;
    }).on('complete', function() {
      document.getElementById('ssn-complete').style.display = 'inline-block';
    });

    var regExpMask = IMask(document.getElementById('regexp-mask'), {
      mask: /^[1-6]\d{0,5}$/
    });

    var numberMask = IMask(document.getElementById('number-mask'), {
      mask: Number,
      min: -10000,
      max: 10000,
      thousandsSeparator: ' '
    }).on('accept', function() {
      document.getElementById('number-value').innerHTML = numberMask.masked.number;
    });

    var dateMask = IMask(
      document.getElementById('date-mask'),
      {
        mask: Date,
        min: new Date(1990, 0, 1),
        max: new Date(2020, 0, 1),
        lazy: false
      }
    ).on('accept', function() {
      document.getElementById('date-value').innerHTML = dateMask.masked.date || '-';
    });

    var dynamicMask = IMask(
      document.getElementById('dynamic-mask'),
      {
        mask: [
          {
            mask: '+{7}(000)000-00-00'
          },
          {
            mask: /^\S*@?\S*$/
          }
        ]
      }
    ).on('accept', function() {
      document.getElementById('dynamic-value').innerHTML = dynamicMask.masked.unmaskedValue || '-';
    });

    var currencyMask = IMask(
      document.getElementById('currency-mask'),
      {
        mask: '$num',
        blocks: {
          num: {
            mask: Number,
            thousandsSeparator: ' '
          }
        }
      }
    ).on('accept', function() {
      document.getElementById('currency-value').innerHTML = currencyMask.masked.unmaskedValue || '-';
    });

    var phonePipe = IMask.createPipe(phoneMask.masked, IMask.PIPE_TYPE.UNMASKED, IMask.PIPE_TYPE.MASKED);
    document.getElementById('pipe-mask').addEventListener('input', function (e) {
      document.getElementById('pipe-value').innerHTML = phonePipe(e.target.value) || '-';
    });
  });
</script>
